<template>
  <view class="container pb-con">
    <view
      class="num box-1"
      @click="navTo('/pagesMine/servicePackage/usageRecord/usageRecord')"
    >
      <view class="left">
        <text>剩余次数：{{ info.detail.num }}次</text>
      </view>
      <view class="right">
        <image :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
      </view>
    </view>

    <view class="address-time">
      <view class="address box-1">
        <view class="left">
          <view class="city">
            {{ info.address.area.split("/").join(" ") }}
          </view>
          <view class="info">
            {{ info.address.address }}
          </view>
          <text class="user"
            >{{ info.address.name }}（{{ info.address.mobile }}）</text
          >
        </view>
        <view class="right">
          <button
            @click="
              navTo(
                '/pagesMine/servicePackage/editAddress/editAddress?id=' +
                  info.id
              )
            "
          >
            更换
          </button>
        </view>
      </view>
      <view class="time box-1">
        <view class="left">
          <view>服务时间：每周三、五 13：00</view>
        </view>
        <view
          class="right"
          @click="navTo('/pagesMine/servicePackage/editDateTime/editDateTime')"
        >
          <button>更换</button>
        </view>
      </view>
    </view>

    <view class="b-s-user box-1">
      <view class="left">
        <view class="title">被服务者信息</view>
        <view class="info">张三 男 45 本人</view>
        <view class="number">12345678910</view>
      </view>
      <view
        class="right"
        @click="navTo('/pagesService/beServiceUserList/beServiceUserList')"
      >
        <button>更换</button>
      </view>
    </view>

    <view class="s-user">
      <view class="title">
        <text>服务人员</text>

        <button
          @click="
            navTo('/pagesMine/servicePackage/editServiceUser/editServiceUser')
          "
        >
          更换
        </button>
      </view>

      <view class="info">
        <view class="left">
          <image :src="$img_path('/mine/avatar.png')" mode="aspectFill"></image>
          <view class="box">
            <view class="name"> <text>李斯</text>为您服务 </view>
            <text>服务评分：95.0</text>
          </view>
        </view>
        <view class="right" @click="callPhone()">
          <image :src="$img_path('/pagesMine/5.png')" mode="widthFix"></image>
        </view>
      </view>
    </view>

    <view class="s-box">
      <image :src="$img_path('/mall/5.png')" mode="widthFix"></image>
      <view class="r-text">
        <view class="name"> 定死服务包名称 </view>
        <view class="spec"> 规格名称规格名称10次 </view>
      </view>
    </view>

    <view class="pay-price">
      <view class="item-con">
        <text>服务金额</text>
        <view class="value"> ￥1000.00 </view>
      </view>
      <view class="item-con">
        <text>优惠券</text>
        <view class="value"> -￥20.00 </view>
      </view>
      <view class="item-con">
        <text>实付款</text>
        <view class="value" style="color: #e72a2a"> ￥980.00 </view>
      </view>
    </view>

    <view class="pay-price disease">
      <view class="item-con">
        <text>疾病</text>
        <view class="value"> 感冒 </view>
      </view>
    </view>

    <view class="tool-box">
      <view class="title"> 有医护服务名称工具/无医护服务名称工具 </view>
      <view class="tool">
        <text>产品名称产品名称(￥ 30.00)</text>
        <image :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
      </view>
    </view>

    <view class="tool-box allergy-history">
      <view class="title"> 有过敏史 </view>
      <view class="tool con">
        内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
      </view>
    </view>

    <view class="image-box">
      <view class="title">
        <text>就医证明</text>
      </view>
      <view class="image">
        <image :src="$img_path('/mall/n_3.png')" mode="aspectFill"></image>
        <image :src="$img_path('/mall/n_3.png')" mode="aspectFill"></image>
      </view>
    </view>
    <view class="remark">
      <view class="title">
        <text>备注信息</text>
      </view>
      <view class="text"> 内容内容内容内容内容内容内容内容内容内容内容 </view>
    </view>
  </view>
</template>

<script>
import { serviceOrderInfo } from "@/utils/api/serviceApi.js";
export default {
  data() {
    return {
      info: {},
    };
  },
  onLoad(options) {
    this.info = JSON.parse(options.data);
    this.getDetail();
  },
  onShow() {
    if (this.info.id) {
      this.getDetail();
    }
  },
  methods: {
    getDetail() {
      serviceOrderInfo({
        id: this.info.id,
      }).then((res) => {
		this.info = res.data;
		this.info.address = res.data.orderAddress;
	  });
    },
    navTo(url) {
      uni.navigateTo({
        url,
      });
    },
    // 拨打电话
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: "18888888888",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "detail.scss";
</style>
